/**
 * Created by zhangsong on 2019-05-08.
 */
import PDFPreview from '@/components/PDFPreview';
import ReaderCard from '@/components/ReaderCard/contractorIndex';
import Power from '@/constants/power';
import Authorized from '@/utils/Authorized';
import React, { Component } from 'react';
import {
  Form,
  Input,
  Popconfirm,
  Button,
  Radio,
  Result,
  Icon,
  Spin,
  Row,
  Col,
  Modal,
  Tooltip,
  Checkbox,
  Select,
  Table,
} from 'antd';
import moment from 'moment';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import { ContractorApplication } from '@/constants/routes';
import { getPageQuery } from '@/utils/utils';
import ContractorReducer from '@/dva/application/contractor';
import UserReducer from '@/dva/user';
import domtoimage from 'dom-to-image';
import Style from './index.module.scss';
import { downloadZip } from '@/utils/attachment';

const { Namespace, Effects } = ContractorReducer;

@connect(
  state => ({
    contractorStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    getById: data =>
      dispatch({
        type: `${Namespace}/${Effects.getContractorById}`,
        data,
      }),
    getPreviewPdfById: id =>
      dispatch({
        type: `${Namespace}/${Effects.getPreviewPdfById}`,
        data: {
          id,
        },
      }),
    handPDFModalCancel: () =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data: {},
      }),
    handleApproval: data =>
      dispatch({
        type: `${Namespace}/${Effects.approval}`,
        data,
      }),
    handleDisapproval: data =>
      dispatch({
        type: `${Namespace}/${Effects.disapproval}`,
        data,
      }),
    handleReviewOk: data =>
      dispatch({
        type: `${Namespace}/${Effects.reviewok}`,
        data,
      }),
    handleDisReview: data =>
      dispatch({
        type: `${Namespace}/${Effects.disapproval}`,
        data,
      }),
    sendEmail: data =>
      dispatch({
        type: `${Namespace}/${Effects.sendEmail}`,
        data,
      }),
    listSubcontractor() {
      dispatch({
        type: `${Namespace}/${Effects.listSubcontractor}`,
      });
    },
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const obj = getPageQuery();
    this.state = {
      id: obj.id,
      previewImage: '',
      previewVisible: false,
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
      readerCardModal: false,
      disabled: true,
      pdfDownLoading: false,
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById, listSubcontractor } = this.props;
    getById(id);
    listSubcontractor();
  }

  toHtml2Canvas = () => {
    const { id } = this.state;
    const { contractorStore = {} } = this.props;
    const { contractorInfo } = contractorStore;
    this.setState(
      {
        disabled: false,
        pdfDownLoading: true,
      },
      () => {
        setTimeout(() => {
          const element = document.querySelector('#staffDetailBody');
          domtoimage
            .toJpeg(element)
            .then(dataUrl =>
              downloadZip(
                {
                  id,
                  type: 'contractor',
                  base64: dataUrl,
                },
                `${contractorInfo.cardNo}_${contractorInfo.surname}.zip`,
              ),
            )
            .then(() => {
              this.setState({
                disabled: true,
                pdfDownLoading: false,
              });
            })
            .catch(error => {
              console.error('oops, something went wrong!', error);
              alert(`error:${error.message}`);
              this.setState({
                disabled: true,
                pdfDownLoading: false,
              });
            });
        }, 500);
      },
    );
  };

  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };

  handleUpdate = () => {
    const { history } = this.props;
    const { id } = this.state;
    history.push(`${ContractorApplication.modify.url}?id=${id}`);
  };

  onPreviewClick = () => {
    const { getPreviewPdfById } = this.props;
    const { id } = this.state;
    getPreviewPdfById(id);
  };

  onPreviewClickSure = () => {
    const { handPDFModalCancel } = this.props;
    handPDFModalCancel();
  };

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.url && file.url.endsWith('.pdf')) {
      this.setState({
        uploadPdfPreviewVisible: true,
        pdfUploadReview: file.url,
      });
      return;
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleUploadPDFCancel = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  onApprovalClick = () => {
    const { handleApproval } = this.props;
    const { id } = this.state;
    handleApproval({ id });
  };

  sendEmail = () => {
    const { sendEmail, contractorStore } = this.props;
    const {
      contractorInfo = {},
    } = contractorStore;
    console.log('看看吧', contractorInfo)
    const obj = {
      checked_approved: contractorInfo.checkedApproved,
      email: contractorInfo.email,
      contract_number: contractorInfo.contractNumber,
      surname: contractorInfo.surname,
    }
    sendEmail(obj)
  }

  onDisapprovalClick = () => {
    const { handleDisapproval } = this.props;
    const { id } = this.state;
    handleDisapproval({ id });
  };

  openRegisterEface = () => {
    this.setState({
      readerCardModal: true,
    });
  };

  closeRegisterEface = () => {
    this.setState({
      readerCardModal: false,
    });
  };

  submitRegisterCard = () => {
    const { getById } = this.props;
    const { id } = this.state;
    this.setState({
      readerCardModal: false,
    });
    getById(id);
  };

  // review
  onDisReview = () => {
    const { handleDisReview } = this.props;
    const { id } = this.state;
    handleDisReview({ id });
  }

  onReview = () => {
    const { handleReviewOk } = this.props;
    const { id } = this.state;
    handleReviewOk({ id });
  }

  renderColumns = () => [
    {
      title: formatMessage({ id: 'baseInfo.actionpeople' }),
      dataIndex: 'operate_user',
    },
    {
      title: formatMessage({ id: 'baseInfo.actionstate' }),
      dataIndex: 'operate_status',
      render: (text, record, index) => {
        console.log('operate_status', text, record, index)
        let status = '';
        switch (text) {
          case 0:
            status = formatMessage('baseInfo.needApprovalStatus')
            break;
          case 1:
            status = formatMessage('applicationStaff.columns.checkedApproved.approved')
            break;
          case -1:
            status = formatMessage('applicationStaff.columns.checkedApproved.disapproved')
            break;
          case 3:
            status = formatMessage('applicationContractor.temporary.cancelled')
            break;
          default:
            status = ''
            break;
        }
        return (
          <div>
            {status}
          </div>
        );
      },
    },
    {
      title: formatMessage({ id: 'baseInfo.actiondate' }),
      dataIndex: 'operate_date',
    },
  ]

  render() {
    const { form, contractorStore = {}, userStore = {} } = this.props;
    const { getFieldDecorator } = form;
    const {
      previewVisible,
      previewImage,
      uploadPdfPreviewVisible,
      pdfUploadReview,
      readerCardModal,
      disabled,
      pdfDownLoading,
    } = this.state;
    const {
      contractorInfo = {},
      detailLoading,
      pdfPreviewVisible,
      pdfReview,
      pdfLoading,
    } = contractorStore;
    const { area, workerType, currentUser } = userStore;
    const { subcontractor } = contractorStore;
    let subcontractorInfo = null;
    if (Array.isArray(subcontractor)) {
      subcontractorInfo = subcontractor.find(
        item => item.id === contractorInfo.contract_subcontractor_id,
      );
    }
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;

    let auditedStatus = null;
    if (contractorInfo.status === 1) {
      auditedStatus = <Result status="success" title={formatMessage('baseInfo.approvalStatus')} />;
    } else if (contractorInfo.status === -1) {
      auditedStatus = <Result status="error" title={formatMessage('baseInfo.disapprovalStatus')} />;
    } else if (contractorInfo.status === 3) {
      auditedStatus = (
        <Result status="error" title={formatMessage('applicationContractor.temporary.cancelled')} />
      );
    } else if (contractorInfo.status === 2) {
      auditedStatus = <Result status="warning" title={formatMessage('baseInfo.needApprovalStatus')} />;
    }

    return (
      <PageHeaderWrapper>
        <Spin spinning={!!detailLoading || pdfDownLoading} size="large">
          <PDFPreview
            visible={pdfPreviewVisible}
            url={pdfReview}
            loading={pdfLoading}
            printing={Authorized.check(Power.ContractorApplication.printing, true, false)}
            onOk={() => this.onPreviewClickSure()}
          />
          <Modal
            visible={previewVisible}
            footer={null}
            maskClosable
            onCancel={() => {
              this.handlePhotographClose();
            }}
          >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
          {readerCardModal ? (
            <ReaderCard
              record={contractorInfo}
              cancel={this.closeRegisterEface}
              sure={this.submitRegisterCard}
            />
          ) : null}
          <div className={`${Style.bodyWrapper}`}>
            <div
              className={`${Style.body} ${disabled ? null : Style.disabled}`}
              id="staffDetailBody"
            >
              <div className={Style.excelTitle}>
                <h1>AIRPORT AUTHORITY HONG KONG</h1>
                <h1>PROJECT SITE</h1>
                <h1>APPLICATION FOR CONTRACTORS&apos; SECURITY PASS</h1>
                {disabled ? <div className={Style.statusWrapper}>{auditedStatus}</div> : null}
              </div>
              <PDFPreview
                visible={uploadPdfPreviewVisible}
                url={pdfUploadReview}
                onOk={this.handleUploadPDFCancel}
                onCancel={this.handleUploadPDFCancel}
                printing={false}
              />
              <Form labelAlign="right" onSubmit={this.handleSubmit}>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Part A</strong>
                    <i>(TO BE COMPLETED BY THE APPLICANT)</i>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.index}>1</div>
                    <div className={Style.detailWrapper}>
                      {/* eslint-disable-next-line react/no-unescaped-entities */}
                      <div>Applicant's Particulars</div>
                      <div className={Style.table}>
                        <Row type="flex">
                          <Col xs={24} sm={8} md={8} order={3}>
                            <div className={Style.row}>
                              <Form.Item>
                                <img
                                  alt={formatMessage(
                                    'applicationContractor.columns.headPhoto.name',
                                  )}
                                  onClick={() => {
                                    if (
                                      Array.isArray(contractorInfo.headPhoto) &&
                                      contractorInfo.headPhoto.length > 0
                                    ) {
                                      this.handlePhotographPreview({
                                        url: contractorInfo.headPhoto[0].url,
                                      });
                                    }
                                  }}
                                  src={
                                    Array.isArray(contractorInfo.headPhoto) &&
                                      contractorInfo.headPhoto.length > 0
                                      ? contractorInfo.headPhoto[0].url
                                      : ''
                                  }
                                  width={104}
                                  height={104}
                                />
                              </Form.Item>
                            </div>
                          </Col>
                          <Col xs={24} sm={16} md={16} order={1}>
                            <div className={Style.row}>
                              <Form.Item
                                label={formatMessage(
                                  'applicationContractor.columns.surname.longText',
                                )}
                              >
                                {getFieldDecorator('surname', {
                                  initialValue: contractorInfo.surname,
                                  rules: [
                                    {
                                      required: true,
                                      message: formatMessage(
                                        'applicationContractor.columns.surname.errMessage',
                                      ),
                                    },
                                  ],
                                })(
                                  <Input
                                    maxLength={50}
                                    className={Style.inputs}
                                    disabled={disabled}
                                  />,
                                )}
                              </Form.Item>
                            </div>
                            <div className={`${Style.row} ${Style.column2}`}>
                              <div>
                                <Form.Item
                                  label={formatMessage(
                                    'applicationContractor.columns.otherName.name',
                                  )}
                                >
                                  {getFieldDecorator('otherName', {
                                    initialValue: contractorInfo.otherName,
                                  })(<Input maxLength={50} disabled={disabled} />)}
                                </Form.Item>
                              </div>
                              <div>
                                <Form.Item
                                  label={formatMessage('applicationContractor.columns.sex.name')}
                                >
                                  {getFieldDecorator('sex', {
                                    initialValue: contractorInfo.sex,
                                    rules: [
                                      {
                                        required: true,
                                        message: formatMessage(
                                          'applicationContractor.columns.sex.errMessage',
                                        ),
                                      },
                                    ],
                                  })(
                                    <Radio.Group disabled={disabled}>
                                      <Radio value={0}>{formatMessage('baseInfo.male')}</Radio>
                                      <Radio value={1}>{formatMessage('baseInfo.female')}</Radio>
                                    </Radio.Group>,
                                  )}
                                </Form.Item>
                              </div>
                            </div>
                            <div className={Style.row}>
                              <Form.Item
                                label={formatMessage(
                                  'applicationContractor.columns.nameAlias.name',
                                )}
                              >
                                {getFieldDecorator('nameAlias', {
                                  initialValue: contractorInfo.nameAlias,
                                })(
                                  <Input
                                    maxLength={50}
                                    className={Style.inputs}
                                    disabled={disabled}
                                  />,
                                )}
                              </Form.Item>
                            </div>
                            <div className={Style.row}>
                              <Form.Item
                                label={formatMessage(
                                  'applicationContractor.columns.commercialCodeAlias.name',
                                )}
                              >
                                {getFieldDecorator('commercialCodeAlias', {
                                  initialValue: contractorInfo.commercialCodeAlias,
                                })(
                                  <Input
                                    maxLength={50}
                                    className={Style.inputs}
                                    disabled={disabled}
                                  />,
                                )}
                              </Form.Item>
                            </div>
                          </Col>
                        </Row>
                        <div className={Style.row}>
                          <Form.Item
                            label={
                              <div
                                style={{
                                  display: 'inline-block',
                                  lineHeight: '24px',
                                }}
                              >
                                Hong Kong Identity Card / Passport /
                                <br />
                                Imported Labour Identity Card Number:
                              </div>
                            }
                            colon={false}
                          >
                            {getFieldDecorator('identityCard', {
                              initialValue: contractorInfo.identityCard,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.identityCard.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.id_base64)
                              ? contractorInfo.id_base64.map((item, index) => (
                                // eslint-disable-next-line react/no-array-index-key
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.birthday.longText')}
                          >
                            {getFieldDecorator('birthday', {
                              initialValue: contractorInfo.birthday
                                ? moment(contractorInfo.birthday).format(
                                  formatMessage('datetimeFormat.date'),
                                )
                                : contractorInfo.birthday,
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.placeOfBirth.name',
                              )}
                            >
                              {getFieldDecorator('placeOfBirth', {
                                initialValue: contractorInfo.placeOfBirth,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.nationality.name',
                              )}
                            >
                              {getFieldDecorator('nationality', {
                                initialValue: contractorInfo.nationality,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.address.name')}
                          >
                            {getFieldDecorator('address', {
                              initialValue: contractorInfo.address,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.address.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={255} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.telephone.name')}
                            >
                              {getFieldDecorator('telephone', {
                                initialValue: contractorInfo.telephone,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.telephone.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.telephoneSpare.name',
                              )}
                            >
                              {getFieldDecorator('telephoneSpare', {
                                initialValue: contractorInfo.telephoneSpare,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.index}>2</div>
                    <div className={Style.detailWrapper}>
                      <div>In case of Emergency the following person should be contacted :</div>
                      <div className={Style.table}>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.emergencyContactedName.longText',
                              )}
                            >
                              {getFieldDecorator('emergencyContactedName', {
                                initialValue: contractorInfo.emergencyContactedName,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.emergencyContactedName.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.emergencyContactedRelationship.name',
                              )}
                            >
                              {getFieldDecorator('emergencyContactedRelationship', {
                                initialValue: contractorInfo.emergencyContactedRelationship,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.emergencyContactedAddress.name',
                            )}
                          >
                            {getFieldDecorator('emergencyContactedAddress', {
                              initialValue: contractorInfo.emergencyContactedAddress,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedAddress.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Input.TextArea
                                maxLength={1000}
                                autoSize={{
                                  minRows: 2,
                                  maxRows: 6,
                                }}
                                disabled={disabled}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.emergencyContactedTelephone.name',
                            )}
                          >
                            {getFieldDecorator('emergencyContactedTelephone', {
                              initialValue: contractorInfo.emergencyContactedTelephone,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedTelephone.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Part B</strong>
                    <i>(TO BE COMPLETED BY THE CONTRACTOR CONCERNED)</i>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      {/* eslint-disable-next-line react/no-unescaped-entities */}
                      <div>To : Security Manager ( Airport Authority Hong Kong )</div>
                      <div className={Style.table}>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractNumber.name',
                            )}
                          >
                            {getFieldDecorator('contractNumber', {
                              initialValue: contractorInfo.contractNumber,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.contractNumber.name',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          {formatMessage('applicationContractor.text.partB.company')}
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.contractPosition.name',
                              )}
                            >
                              {getFieldDecorator('contractPosition', {
                                initialValue: contractorInfo.contractPosition,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.contractSubcontractor.name',
                              )}
                            >
                              {getFieldDecorator('contractSubcontractor', {
                                initialValue: subcontractorInfo ? `${subcontractorInfo.name}` : '',
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.contractEmployer.name',
                              )}
                            >
                              {getFieldDecorator('contractEmployer', {
                                initialValue: contractorInfo.contractEmployer,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.contractFrom.name',
                              )}
                            >
                              {getFieldDecorator('contractFrom', {
                                initialValue: contractorInfo.contractFrom
                                  ? moment(contractorInfo.contractFrom).format(
                                    formatMessage('datetimeFormat.date'),
                                  )
                                  : null,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.contractTo.name')}
                            >
                              {getFieldDecorator('contractTo', {
                                initialValue: contractorInfo.contractTo
                                  ? moment(contractorInfo.contractTo).format(
                                    formatMessage('datetimeFormat.date'),
                                  )
                                  : null,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>

                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractResident.name',
                            )}
                          >
                            {getFieldDecorator('contractResident', {
                              initialValue: contractorInfo.contractResident,
                            })(
                              <Radio.Group disabled={disabled}>
                                <Radio value={1}>
                                  <FormattedMessage id="applicationContractor.columns.contractResident.resident" />
                                </Radio>
                                <Radio value={0}>
                                  <FormattedMessage id="applicationContractor.columns.contractResident.unresident" />
                                </Radio>
                              </Radio.Group>,
                            )}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.contractApplicantDrive.name',
                              )}
                            >
                              {getFieldDecorator('contractApplicantDrive', {
                                initialValue: contractorInfo.contractApplicantDrive,
                              })(
                                <Radio.Group disabled={disabled}>
                                  <Radio value={1}>
                                    <FormattedMessage id="applicationContractor.columns.contractApplicantDrive.applicant" />
                                  </Radio>
                                  <Radio value={0}>
                                    <FormattedMessage id="applicationContractor.columns.contractApplicantDrive.disApplicant" />
                                  </Radio>
                                </Radio.Group>,
                              )}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.drivingLicenseExpire.name',
                              )}
                            >
                              {getFieldDecorator('drivingLicenseExpire', {
                                initialValue: contractorInfo.drivingLicenseExpire,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.annexes.name')}
                            >
                              {Array.isArray(contractorInfo.drive_base64)
                                ? contractorInfo.drive_base64.map((item, index) => (
                                  // eslint-disable-next-line react/no-array-index-key
                                  <div key={index}>
                                    <Button
                                      type="link"
                                      onClick={() => this.handlePhotographPreview(item)}
                                    >
                                      {item.name}
                                    </Button>
                                  </div>
                                ))
                                : null}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractVehicle.name',
                            )}
                          >
                            {getFieldDecorator('contractVehicle', {
                              initialValue: contractorInfo.contractVehicle,
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          {formatMessage('applicationContractor.text.partB.possify')}
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.annexes.name')}
                            >
                              {Array.isArray(contractorInfo.drive_certificate_base64)
                                ? contractorInfo.drive_certificate_base64.map((item, index) => (
                                  // eslint-disable-next-line react/no-array-index-key
                                  <div key={index}>
                                    <Button
                                      type="link"
                                      onClick={() => this.handlePhotographPreview(item)}
                                    >
                                      {item.name}
                                    </Button>
                                  </div>
                                ))
                                : null}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          {formatMessage('applicationContractor.text.partB.atteify')}
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.annexes.name')}
                            >
                              {Array.isArray(contractorInfo.safety_certificate_base64)
                                ? contractorInfo.safety_certificate_base64.map((item, index) => (
                                  // eslint-disable-next-line react/no-array-index-key
                                  <div key={index}>
                                    <Button
                                      type="link"
                                      onClick={() => this.handlePhotographPreview(item)}
                                    >
                                      {item.name}
                                    </Button>
                                  </div>
                                ))
                                : null}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          {formatMessage('applicationContractor.text.partB.depm')}
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.annexes.name')}
                            >
                              {Array.isArray(contractorInfo.inspect_certificate_base64)
                                ? contractorInfo.inspect_certificate_base64.map((item, index) => (
                                  // eslint-disable-next-line react/no-array-index-key
                                  <div key={index}>
                                    <Button
                                      type="link"
                                      onClick={() => this.handlePhotographPreview(item)}
                                    >
                                      {item.name}
                                    </Button>
                                  </div>
                                ))
                                : null}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Part C</strong>
                    <i>(TO BE COMPLETED BY SECURITY DEPARTMENT AIRPORT AUTHORITY HONG KONG)</i>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      {/* eslint-disable-next-line react/no-unescaped-entities */}
                      <div>{formatMessage('applicationContractor.text.partC.relevant')}</div>
                      <div className={Style.table}>
                        {
                          currentUser.role_id === '110' ? null :
                            <div className={Style.row}>
                              <Form.Item
                                label={formatMessage(
                                  'applicationContractor.columns.checkedApproved.name',
                                )}
                              >
                                {getFieldDecorator('checkedApproved', {
                                  initialValue: contractorInfo.checkedApproved,
                                })(
                                  <Radio.Group disabled>
                                    {
                                      currentUser.role_id !== '110' ? (
                                        <Radio value={1}>
                                          <FormattedMessage id="applicationStaff.columns.checkedApproved.approved" />
                                        </Radio>
                                      ) : null
                                    }
                                    <Radio value={-1}>
                                      <FormattedMessage id="applicationStaff.columns.checkedApproved.disapproved" />
                                    </Radio>

                                    {
                                      currentUser.role_id === '100' ? (
                                        <Radio value={3}>
                                          <FormattedMessage id="applicationContractor.temporary.cancelled" />
                                        </Radio>
                                      ) : null
                                    }
                                    <Radio value={0}>
                                      <FormattedMessage id="baseInfo.needApprovalStatus" />
                                    </Radio>
                                  </Radio.Group>,
                                )}
                              </Form.Item>
                            </div>
                        }
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('checkedExpiry', {
                              initialValue: contractorInfo.checkedExpiry
                                ? moment(contractorInfo.checkedExpiry).format(
                                  'YYYY-MM-DD',
                                )
                                : null,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          {formatMessage('applicationContractor.text.partC.restrictions')}
                        </div>
                        <div className={Style.row}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.checkedClassification.name',
                              )}
                            >
                              {getFieldDecorator('checkedClassification', {
                                initialValue: contractorInfo.checkedClassification,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={
                              <span>
                                {formatMessage(
                                  'applicationContractor.columns.checkedSpecified.name',
                                )}
                                &nbsp;
                                <Tooltip title={zoneTips}>
                                  <Icon type="question-circle-o" />
                                </Tooltip>
                              </span>
                            }
                          >
                            {getFieldDecorator('checkedSpecified', {
                              initialValue: contractorInfo.checkedSpecified,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.checkedSpecified.errMessage',
                                  ),
                                },
                              ],
                            })(
                              area == null ? (
                                <Spin spinning />
                              ) : (
                                <Checkbox.Group name="checkedSpecified" disabled={disabled}>
                                  {area.map(item => (
                                    <Checkbox
                                      key={item.id}
                                      value={item.id}
                                      disabled={item.status !== 1}
                                    >
                                      {item.areaCode}
                                    </Checkbox>
                                  ))}
                                </Checkbox.Group>
                              ),
                            )}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.checkedReasons.name',
                            )}
                          >
                            {getFieldDecorator('checkedReasons', {
                              initialValue: contractorInfo.checkedReasons,
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.annexes)
                              ? contractorInfo.annexes.map((item, index) => (
                                // eslint-disable-next-line react/no-array-index-key
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.annexes.groupname',
                            )}
                          >
                            {getFieldDecorator('groupName', {
                              initialValue: contractorInfo.newlistName,
                            })(<Input maxLength={50} disabled={disabled} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>Card</strong>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        {/* 绿卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName1', {
                                initialValue: contractorInfo.workerCardName1,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo1', {
                                initialValue: contractorInfo.workerCardNo1,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.num.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate1', {
                                initialValue: contractorInfo.workerCardExpiredDate1,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.green_base64)
                              ? contractorInfo.green_base64.map((item, index) => (
                                // eslint-disable-next-line react/no-array-index-key
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        {/* 工人注册卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName2', {
                                initialValue: contractorInfo.workerCardName2,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo2', {
                                initialValue: contractorInfo.workerCardNo2,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.num.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate2', {
                                initialValue: contractorInfo.workerCardExpiredDate2,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.expiredDate.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.workType.name')}
                            >
                              {getFieldDecorator('workerCardWorkType2', {
                                initialValue: contractorInfo.workerCardWorkType2,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.workType.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Select
                                  disabled={disabled}
                                  showSearch
                                  style={{ width: '100%' }}
                                  optionFilterProp="children"
                                  filterOption={(input, option) =>
                                    option.props.children
                                      .toLowerCase()
                                      .indexOf(input.toLowerCase()) >= 0
                                  }
                                  loading={workerType === null}
                                  placeholder={formatMessage('baseInfo.placeholderChecked')}
                                >
                                  {Array.isArray(workerType)
                                    ? workerType.map(item => (
                                      <Select.Option
                                        key={item.id}
                                        value={item.id}
                                      >{`${item.code} - ${item.nameZh}`}</Select.Option>
                                    ))
                                    : null}
                                </Select>,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.regist_base64)
                              ? contractorInfo.regist_base64.map((item, index) => (
                                // eslint-disable-next-line react/no-array-index-key
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        {/* 蓝卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.blueCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName3', {
                                initialValue: contractorInfo.workerCardName3,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo3', {
                                initialValue: contractorInfo.workerCardNo3,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate3', {
                                initialValue: contractorInfo.workerCardExpiredDate3,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        {/* 自定义 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName4', {
                                initialValue: contractorInfo.workerCardName4,
                                rules: [
                                  {
                                    required: this.state.checkNick,
                                    message: 'Please input your nickname',
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo4', {
                                initialValue: contractorInfo.workerCardNo4,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate4', {
                                initialValue: contractorInfo.workerCardExpiredDate4,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        {/* 自定义2 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName5', {
                                initialValue: contractorInfo.workerCardName5,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo5', {
                                initialValue: contractorInfo.workerCardNo5,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate5', {
                                initialValue: contractorInfo.workerCardExpiredDate5,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        {/* 疫苗日期 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.vaccination_date" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date1',
                              )}
                            >
                              {getFieldDecorator('vaccination_date1', {
                                initialValue: contractorInfo.vaccination_date1,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date2',
                              )}
                            >
                              {getFieldDecorator('vaccination_date2', {
                                initialValue: contractorInfo.vaccination_date2,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date3',
                              )}
                            >
                              {getFieldDecorator('vaccination_date3', {
                                initialValue: contractorInfo.vaccination_date3,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={`${Style.row} ${Style.column3}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date4',
                              )}
                            >
                              {getFieldDecorator('vaccination_date4', {
                                initialValue: contractorInfo.vaccination_date4,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date5',
                              )}
                            >
                              {getFieldDecorator('vaccination_date5', {
                                initialValue: contractorInfo.vaccination_date5,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.vacc_base64)
                              ? contractorInfo.vacc_base64.map((item, index) => (
                                // eslint-disable-next-line react/no-array-index-key
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.include" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div style={{ display: 'flex' }}>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.include')}
                            >
                              {getFieldDecorator('isInfected', {
                                initialValue: contractorInfo.isInfected === 2,
                                // initialValue: contractorInfo.isBlack === 2,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Checkbox
                                  checked={form.getFieldValue('isInfected')}
                                  name="isInfected"
                                  disabled
                                ></Checkbox>,
                              )}
                            </Form.Item>
                            <Form.Item
                              label=""
                            >
                              {getFieldDecorator('inspection_exemption_time', {
                                initialValue: contractorInfo.inspection_exemption_time,
                                rules: [
                                  {
                                    required: form.getFieldValue('isInfected'),
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Input maxLength={50} disabled={disabled} />,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.annexes.name')}
                          >
                            {Array.isArray(contractorInfo.exemption_base64)
                              ? contractorInfo.exemption_base64.map((item, index) => (
                                // eslint-disable-next-line react/no-array-index-key
                                <div key={index}>
                                  <Button
                                    type="link"
                                    onClick={() => this.handlePhotographPreview(item)}
                                  >
                                    {item.name}
                                  </Button>
                                </div>
                              ))
                              : null}
                          </Form.Item>
                        </div>
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.blacklist" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.isblacklist')}
                            >
                              {getFieldDecorator('isBlack', {
                                initialValue: contractorInfo.isBlack === 2,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Checkbox
                                  checked={contractorInfo.isBlack === 2}
                                  disabled
                                ></Checkbox>,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={Style.row}>
                          <FormattedMessage id="applicationContractor.temporary.email" />
                        </div>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.temporary.email')}
                            >
                              {getFieldDecorator('email', {
                                initialValue: contractorInfo.email,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationContractor.temporary.errMessage.email',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={255} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.partone}>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item label={formatMessage('applicationCommon.readerCard.passno')}>
                              {formatMessage(`${contractorInfo.card_no}`)}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.readerCard.status.name')}
                            >
                              {formatMessage(
                                `applicationCommon.readerCard.status.${contractorInfo.efaceStatus}`,
                              )}
                              {disabled ? (
                                <Authorized authority={Power.ContractorApplication.printing}>
                                  <Button
                                    htmlType="button"
                                    style={{ marginLeft: '100px' }}
                                    type="dashed"
                                    size="small"
                                    onClick={() => this.openRegisterEface()}
                                  >
                                    {formatMessage('applicationCommon.readerCard.buttonName')}
                                  </Button>
                                </Authorized>
                              ) : null}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>{formatMessage('baseInfo.approvehistory')}</strong>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <Table
                        loading={!!detailLoading}
                        rowKey="id"
                        columns={this.renderColumns()}
                        pagination={false}
                        dataSource={contractorInfo?.contractor_approve_operates}
                      />
                    </div>
                  </div>
                </div>
                {disabled ? (
                  <div className={Style.bottom}>
                    <Button htmlType="button" icon="rollback" onClick={this.handleGoBack}>
                      {formatMessage('button.rollback')}
                    </Button>
                    <Authorized authority={Power.ContractorApplication.modify}>
                      <Button
                        type="primary"
                        htmlType="button"
                        icon="edit"
                        onClick={this.handleUpdate}
                      >
                        {formatMessage('button.update')}
                      </Button>
                    </Authorized>
                    {/* {contractorInfo.status === 3 ? (
                      <Authorized authority={Power.ContractorApplication.approval}>
                        <Popconfirm
                          title={formatMessage('baseInfo.disapproval')}
                          onConfirm={() => this.onDisapprovalClick()}
                          okText={formatMessage('button.sure')}
                          cancelText={formatMessage('button.cancel')}
                        >
                          <Button type="danger" icon="stop">
                            {formatMessage('button.disapproval')}
                          </Button>
                        </Popconfirm>
                        <Popconfirm
                          title={formatMessage('baseInfo.approval')}
                          onConfirm={() => this.onApprovalClick()}
                          okText={formatMessage('button.sure')}
                          cancelText={formatMessage('button.cancel')}
                        >
                          <Button type="primary" icon="check-circle">
                            {formatMessage('button.approval')}
                          </Button>
                        </Popconfirm>
                      </Authorized>
                    ) : null} */}
                    {contractorInfo.status === 0 ? (
                      <>
                        <Authorized authority={Power.ContractorApplication.cancel}>
                          <Popconfirm
                            title={formatMessage('applicationContractor.temporary.cancelled')}
                            onConfirm={() => this.onReview()}
                            okText={formatMessage('button.sure')}
                            cancelText={formatMessage('button.cancel')}
                          >
                            <Button type="danger" icon="stop">
                              {formatMessage('applicationContractor.temporary.cancelled')}
                            </Button>
                          </Popconfirm>

                          {/* <Popconfirm
                          title={formatMessage('baseInfo.review')}
                          onConfirm={() => this.onReview()}
                          okText={formatMessage('button.sure')}
                          cancelText={formatMessage('button.cancel')}
                        >
                          <Button type="primary" icon="check-circle">
                            {formatMessage('baseInfo.review')}
                          </Button>
                        </Popconfirm> */}
                        </Authorized>
                        <Authorized authority={Power.ContractorApplication.approval}>
                          <Popconfirm
                            title={formatMessage('baseInfo.disapproval')}
                            onConfirm={() => this.onDisapprovalClick()}
                            okText={formatMessage('button.sure')}
                            cancelText={formatMessage('button.cancel')}
                          >
                            <Button type="danger" icon="stop">
                              {formatMessage('button.disapproval')}
                            </Button>
                          </Popconfirm>
                          <Popconfirm
                            title={formatMessage('baseInfo.approval')}
                            onConfirm={() => this.onApprovalClick()}
                            okText={formatMessage('button.sure')}
                            cancelText={formatMessage('button.cancel')}
                          >
                            <Button type="primary" icon="check-circle">
                              {formatMessage('button.approval')}
                            </Button>
                          </Popconfirm>
                        </Authorized>
                      </>

                    ) : null}
                    <Authorized authority={Power.ContractorApplication.preview}>
                      <Button htmlType="button" icon="file-pdf" onClick={this.onPreviewClick}>
                        {formatMessage('button.preview')}
                      </Button>
                    </Authorized>
                    <Authorized authority={Power.StaffApplication.preview}>
                      <Button htmlType="button" icon="download" onClick={this.toHtml2Canvas}>
                        {formatMessage('button.download')}
                      </Button>
                    </Authorized>
                    {
                      contractorInfo.checkedApproved === 1 ? (
                        <Authorized authority={Power.StaffApplication.preview}>
                          <Button htmlType="button" icon="mail" onClick={this.sendEmail}>
                            {formatMessage('applicationContractor.temporary.sendemail')}
                          </Button>
                        </Authorized>
                      ) : null
                    }

                  </div>
                ) : null}
              </Form>
            </div>
          </div>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
